@import '../../../styles/var.scss';
@import '../../../styles/mixins.scss';

.m-product-detail {
  &-header {
    padding: 8px 32px 32px;
    margin-bottom: 16px;
    background-color: #fff;

    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;

      .m-product-selling-price {
        font-size: $font-size-base;

        &-integer {
          font-size: 48px;
        }
      }

      &-extra {
        color: $text-color-base;
        font-size: $font-size-small;
      }
    }

    &-secondary {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;

      &-tag-group {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 8px;
      }

      &-share {
        height: auto;
        padding: 0;

        &::before {
          content: none;
        }

        .nut-button-text {
          font-size: $font-size-small;
          color: $text-color-base;
          font-weight: 400;
          line-height: 1em;
        }
      }
    }

    &-title {
      font-size: $font-size-xlarge;
      color: $text-color-main;
      margin-bottom: 16px;
    }

    &-desc {
      font-size: $font-size-base;
      color: $text-color-secondary;
      margin-top: 24px;
    }
  }

  &-company {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 32px;
    margin-bottom: 16px;
    background-color: #fff;

    &-logo,
    &-btn {
      flex-shrink: 0;
    }

    &-content {
      flex: 1;

      &-title {
        font-size: $font-size-base;
        color: $text-color-main;
        font-size: 500;
      }

      &-desc {
        font-size: $font-size-small;
        color: $text-color-secondary;
        font-size: 400;
      }
    }
  }

  &-body {
    margin-bottom: 200px;
  }

  &-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    background-color: #fff;
    box-shadow: inset 0 0 0 0 #e0e0e0;
  }
}
